

<template>
  <div style="display: flex;flex-direction: column">
    <!--头部区域 -->
    <div style="height: 60px;background-color: blue;width: 100vw;display: flex"></div>
    <span style="font-size: 20px;color: white;height: 100%;display: flex;align-items: center;margin-left:100px">欢迎使用后台管理系统</span>

    <div style="flex: 1"></div>
    <div style="height: 100%;display: flex;align-items: center;margin-left:100px">

    <div>
      <span style="font-size: 20px;color: white">张三</span>
      <img src="https://p1.ssl.qhimgs1.com/t04d8b13990ae2e8491.jpg"
           style="width: 40px;height: 40px;border-radius: 40px" >
    </div>
  </div>
    <!-- 内容区域-->
    <div style="width: 100vw;height: calc(100vh - 60px);display: flex" >
      <!-- 左边布局-->
      <el-menu
        style="width: 200px;height: 100%"
        class="el-menu-vertical-demo"
        router
        :default-active="activeMenu"
      >
        <el-menu-item index="/manager">
          <el-icon><HomeFilled /></el-icon>
          系统首页</el-menu-item>
        <el-menu-item index="/manager/home">
          <el-icon><Management /></el-icon>
          信息管理</el-menu-item>
        <el-menu-item index="/manager/book">
          <el-icon><Notebook /></el-icon>
          图书管理</el-menu-item>

        <el-sub-menu>
          <template #title>
            <el-icon><location /></el-icon>
            <span>信息分类</span>
          </template>

          用户分类
          <el-menu-item index="/manager/book">学生列表</el-menu-item>
          <el-menu-item index="/manager/info">教师列表</el-menu-item>
        </el-sub-menu>


      </el-menu>
      <!-- 右边内容区域-->
      <div style="height : 100%;flex: 1">
        <RouterView></RouterView>
      </div>
    </div>

  </div>


</template>

<script setup>


import {useRoute}  from "vue-router";
import {computed} from "vue";
const route=useRoute()

const activeMenu=computed(()=>{
  return route.path
})
</script>

<style scoped>

</style>